<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-10-27 19:09:10
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-10-28 21:04:11
-->
<template>
  <div>
    <el-input placeholder="输入关键字进行过滤" style="width: 300px;" v-model="filterText">
    </el-input>
    <el-tree class="filter-tree" :data="data" node-key='id' @check='handleCheckNode' show-checkbox :props="defaultProps"
      default-expand-all :filter-node-method="filterNode" ref="tree">
    </el-tree>

    <div aria-haspopup='测试'>
      内容
    </div>
  </div>
</template>
<script>
  export default {
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    data() {
      return {
        filterText: '',
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
          }, {
            id: 5,
            label: '二级 1-2'
          }, {
            id: 6,
            label: '二级 1-3'
          }, {
            id: 7,
            label: '二级 1-4'
          }, {
            id: 8,
            label: '三级 1-1'
          }, {
            id: 9,
            label: '三级 1-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    created() {
      window.addEventListener('scroll', this.debounce())
    },
    methods: {
      filterNode(value, data) {
        console.log(value, data, 'shufjhakjh')
        if (!value) return true;
        data.show = data.label.indexOf(value) !== -1
        return data.label.indexOf(value) !== -1;
      },
      handleCheckNode(val, data) {
        console.log(val, data, '选中的数据')
      },
      debounce(fun, wait) {
      }
    },
  }
</script>